<template>
  <el-dialog v-model="dialogVisible" :title="`${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
    <el-form
      class="drawer-multiColumn-form"
      label-width="100px"
      ref="formRef"
      :rules="rules"
      :model="parameter.row"
      :disabled="parameter.isView"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="parameter.row!.name" placeholder="名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="数据源" prop="dataSource">
        <el-select v-model="parameter.row!.dataSource" placeholder="请选择数据源" clearable>
          <el-option v-for="item in parameter.dataSourcesEnum" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>

      <el-form-item label="表名" prop="tableName" v-if="parameter.addType == 'input'">
        <el-input v-model="parameter.row!.tableName" placeholder="请填写完整表名，如：test.tableA" clearable>
          <template #append>
            <el-button :icon="Search" @click="parameter.addType = 'auto_import'">搜索</el-button>
          </template>
        </el-input>
      </el-form-item>

      <AutoImportTableInfoForm
        :disabled="!parameter.row!.dataSource"
        ref="autoImportTableInfoFormRef"
        v-else
        :data-source="parameter.row!.dataSource"
        @switch-add-type="parameter.addType = 'input'"
      ></AutoImportTableInfoForm>

      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="parameter.row!.description" placeholder="请填写描述" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">{{ parameter.isView ? "关闭" : "取消" }}</el-button>
      <el-button v-show="!parameter.isView" type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="TableInfoDialog">
// 11
import { reactive, ref } from "vue";
import { API } from "@/api/modules/dwh/typings";
import { DialogType } from "@/utils/dict";
import { ElMessage, FormInstance } from "element-plus";
import { saveOrUpdateUsingPOST } from "@/api/modules/dwh/tableInfoController";
import { Search } from "@element-plus/icons-vue";
import AutoImportTableInfoForm from "@/views/dwh/tableInfo/components/autoImportTableInfoForm.vue";

const emit = defineEmits<{
  (event: "success"): void;
}>();

export interface TableInfoParameterProps {
  title: string; // 标题
  isView: boolean;
  row: API.TableInfoVo;
  addType?: "auto_import" | "input";
  dialogType: DialogType;
  dataSourcesEnum: API.DataSourceInfoVo[];
}

const autoImportTableInfoFormRef = ref<InstanceType<typeof AutoImportTableInfoForm> | null>(null);

const rules = reactive({
  name: [{ required: true, message: "请输入名称" }],
  tableName: [{ required: true, message: "请填写表名，如：test.tableA" }],
  dataSource: [{ required: true, message: "请选择数据源" }],
  autoImportTableInfo: {
    schemaName: [{ required: true, message: "请选择库" }],
    tableName: [{ required: true, message: "请选择表" }]
  }
});

// dialog状态
const dialogVisible = ref(false);
// 父组件传过来的参数
const parameter = ref<TableInfoParameterProps>({
  title: "",
  row: {},
  isView: false,
  addType: "input",
  dataSourcesEnum: [],
  dialogType: DialogType.show
});

const formRef = ref<FormInstance>();
const submit = () => {
  formRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      if (parameter.value.addType == "auto_import") {
        parameter.value.row.tableName = `${autoImportTableInfoFormRef.value?.autoImportTableInfo.schemaName}.${autoImportTableInfoFormRef.value?.autoImportTableInfo.tableName}`;
      }
      parameter.value.row.addType = parameter.value.addType;
      await saveOrUpdateUsingPOST(parameter.value.row);
      ElMessage.success({ message: `${parameter.value.row.name}添加成功！` });
      emit("success");
      dialogVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

// 接收父组件参数
const acceptParams = (params: TableInfoParameterProps) => {
  parameter.value = { ...parameter.value, ...params };
  dialogVisible.value = true;
  parameter.value.addType = "input";
};

defineExpose({
  acceptParams
});
</script>
<style lang="scss" scoped></style>
